<template>
  <el-dialog :title="isEdit ? '编辑一件事' : '新增一件事'" :visible.sync="showDialog" width="60%" class="addOneThing">
    <div class="content">
      <h2>已添加</h2>
      <div class="inputBox">
        <span>一件事名称：</span>
        <el-input type="text" v-model="thingName" placeholder="请输入一件事的名称" style="width: 280px"></el-input>
      </div>
      <div class="choiceBox">
        <div class="item" v-for="x in choiceBox" :key="x.implementName">
          <span>{{ x.implementName }}</span>
          <i class="el-icon-error" style="color: #ccc; font-size: 16px" @click="del(x)"></i>
        </div>
      </div>
      <h2>部门</h2>
      <el-cascader
        :options="departOptions"
        v-model="selectDepart"
        clearable
        placeholder="请选择部门"
        style="width:380px;margin-top:10px;margin-left:30px;"
        @change="handleChange"
      ></el-cascader>
      <div class="tableBox">
        <el-table ref="multipleTable" v-loading="loading" border :data="tableData" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="index" type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
          <el-table-column prop="situationObjectName" label="所属单位" show-overflow-tooltip></el-table-column>
          <el-table-column prop="implementName" label="实施清单名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="implementCoding" label="实施编码" show-overflow-tooltip></el-table-column>
          <el-table-column prop="unitOfLimitTime" label="时限" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column prop="eventType" label="事项类型" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column label="操作" width="180px" align="center">
            <template slot-scope="scope">
              <i class="el-icon-circle-plus" @click="add(scope.row)" v-if="!scope.row.checked"></i>
              <i class="el-icon-remove" @click="del(scope.row)" v-else></i>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getMatterList, addOneThing, updateOneThing, getOnethingDetails,getDepartTree } from '@/api/onethingManage';
export default {
  props: {
    areaCode: {
      type: String,
      default: ''
    }
  },
  watch: {
    areaCode: function (newVal) {
      this.initPage();
    }
  },
  data() {
    return {
      editThingId: '',
      isEdit: false,
      showDialog: false,
      loading: false,
      tableData: [],
      choiceBox: [],
      thingName: '',
      current: 1, //当前页
      size: 20, //每页的数量
      total: 0,
      departOptions:[],
      selectDepart:'',
      departs:[]
    };
  },
  methods: {
    handleChange(opt){
      this.departs = [];
      if(opt && opt.length !== 0){
        let len = opt.length;
        this.departs.push(opt[len - 1]);
      }
     this.initTable();
    },
    indexMethod(index) {
      return index + 1;
    },
    handleSizeChange(val) {
      this.current = 1;
      this.size = val;
      this.initPage();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.initPage();
    },
    add(opt) {
      this.choiceBox.push(opt);
      this.initData();
    },
    del(opt) {
      let len = this.choiceBox.length - 1;
      for (let i = len; i > -1; i--) {
        if (this.choiceBox[i].implementName == opt.implementName) {
          this.choiceBox.splice(i, 1);
        }
      }

      this.initData();
    },
    submit() {
      if (!this.thingName) {
        this.$message.warning('请输入一件事名称');
      } else if (this.choiceBox.length == 0) {
        this.$message.warning('请至少选择一个实施清单名称');
      } else {
        let choiceId = [];
        this.choiceBox.forEach((e) => {
          choiceId.push(e.eventId);
        });
        if (this.isEdit) {
          updateOneThing({
            thingId: this.editThingId,
            thingName: this.thingName,
            eventId: choiceId,
            areaCode: this.areaCode
          }).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('编辑成功');
              this.thingName = '';
              this.choiceBox = [];
              this.initData();
              this.$emit('addSuccess');
              this.showDialog = false;
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          addOneThing({
            thingName: this.thingName,
            eventId: choiceId,
            areaCode: this.areaCode
          }).then((res) => {
            if (res.data.code === 200) {
              this.$message.success('新增成功');
              this.thingName = '';
              this.choiceBox = [];
              this.initData();
              this.$emit('addSuccess');
              this.showDialog = false;
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      }
    },
    initData() {
      this.tableData.forEach((e) => {
        this.$set(e, 'checked', false);
      });
      this.tableData.forEach((e1) => {
        let hasChecked = this.choiceBox.some((e2) => {
          return e1.implementName == e2.implementName;
        });
        this.$set(e1, 'checked', hasChecked);
      });
    },
    initTreeData(departOptions){
      departOptions.forEach(e=>{
        this.$set(e,'label',e.departName);
        this.$set(e,'value',e.departId);
        if(e.children && e.children.length != 0){
          this.initTreeData(e.children);
        }
      })
    },
    initTable(){
      let params = {
        pageNum: this.current,
        pageSize: this.size,
        departs: this.departs
      };
      this.loading = true;
      getMatterList(params).then((res) => {
        this.loading = false;
        this.tableData = res.data.result.records;
        this.total = res.data.result.total;
        this.initData();
      });
    },
    initPage() {
      this.initTable();
      //获取部门树
      getDepartTree().then(res=>{
        this.departOptions = res.data.result;
        this.initTreeData(this.departOptions);
      })
    },
    getThingDetails(thingId) {
      if (thingId) {
        this.editThingId = thingId;
        getOnethingDetails(thingId).then((res) => {
          let data = res.data.result;
          this.thingName = data.thingName;
          this.choiceBox = [];
          data.events.forEach((e) => {
            this.choiceBox.push({
              eventId: e.id,
              implementName: e.name
            });
          });
          this.initData();
        });
      } else {
        this.thingName = '';
        this.choiceBox = [];
        this.initData();
      }
    }
  },
  mounted() {
    this.initPage();
  }
};
</script>

<style lang="scss" scoped>
.fenye {
  margin: 20px 0;
  text-align: right;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ddd;
}
.addOneThing {
  h2 {
    font-size: 14px;
    font-weight: bold;
  }
  .inputBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
  }
  .choiceBox {
    overflow: hidden;
    margin-bottom: 10px;
    .item {
      height: 32px;
      line-height: 30px;
      text-align: center;
      padding: 0 10px;
      font-size: 14px;
      float: left;
      border-radius: 5px;
      border: 1px solid #409eff;
      margin-right: 10px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      i {
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }
  .tableBox {
    margin-top: 20px;
  }
  .el-icon-circle-plus {
    font-size: 26px;
    color: #409eff;
    cursor: pointer;
  }
  .el-icon-remove {
    font-size: 26px;
    color: #f56c6c;
    cursor: pointer;
  }
}
</style>
